@import '~ng-devui/styles-var/devui-var.scss';

.my-icon::before {
  width: 16px;
  height: 16px;
  font-style: italic;
  font-size: $devui-font-size;
  line-height: 14px;
  display: inline-block;
  text-align: center;
  color: $devui-light-text;
  border-radius: $devui-border-radius;
}

.my-icon.doc::before {
  content: 'W';
  background-color: #295396;
  border: 1px #224488 solid;
}

.my-icon.pdf::before {
  content: 'A';
  background-color: #da0a0a;
  border: 1px #dd0000 solid;
}

.my-icon.xls::before {
  content: 'X';
  background-color: #207044;
  border: 1px #18683c solid;
}

.my-icon.ppt::before {
  content: 'P';
  background-color: #d14424;
  border: 1px #dd4422 solid;
}

.my-icon.mix::before {
  content: '?';
  font-style: normal;
  background-color: #aaaaaa;
  border: 1px #999999 solid;
}

:host ::ng-deep .icon.icon-collapse {
  transform: rotateY(180deg);
  display: inline-block;
}

.op-icons {
  display: inline-block;
  margin-left: 8px;
  cursor: pointer;
  color: #575d6c;
  font-size: $devui-font-size-icon;
}

.op-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: $devui-success;
}

.status-position {
  position: absolute;
  right: 8px;
}

:host ::ng-deep .devui-tree-node__content {
  width: 100%;
}

.tree-title {
  display: flex;
  justify-content: space-between;
  padding-left: 24px;
  padding-right: 16px;
}

.op-icons:focus {
  outline: none;
}
